<template>
  <div class="my-body height-300">
    <el-row type="flex" justify="space-between">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <span @click="to()" style="font-weight: bold">首页</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(v,i) in parentPath" :key="i">
          <span @click="to(i)" style="font-weight: bold">{{ v.fileName }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <el-button-group>
        <el-button icon="el-icon-upload" @click="uploadFiles">上传文件</el-button>
        <el-button type="primary" icon="el-icon-folder-add" @click="dialogShow = true">新建文件夹</el-button>
      </el-button-group>
    </el-row>
    <div style="display: flex;flex-wrap: wrap">
      <div class="my-folder my-text-cc" slot="reference" v-for="(v,i) in tableData" :key="i">
        <el-dropdown size="medium" @command="val=>handleCommand(val,v)" trigger="click">
          <div style="height: 40px">
            <svg v-if="v.isDir" t="1613976142348" class="icon" viewBox="0 0 1025 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="5697" width="100" height="100">
              <path
                  d="M450.516401 166.4c13.6 36 52 60.8 92 62.4 11.2 0 12.8 0 23.2 0l8 0 369.6 0c33.6 0 61.6 28.8 61.6 62.4l0 248 0 124 0 186.4c0 33.6-28 62.4-61.6 62.4L80.916401 912c-33.6 0-61.6-28.8-61.6-62.4L19.316401 166.4c0-33.6 28-62.4 61.6-62.4l308 0M388.916401 104.8 388.916401 104.8c29.6 1.6 53.6 37.6 61.6 62.4"
                  fill="#1296db" p-id="5698"></path>
            </svg>
            <svg v-else t="1614045669199" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="3326" width="100" height="100">
              <path
                  d="M866.987 259.413c0-6.827 0-6.827 0 0v-13.653l-163.84-143.36c-6.827-6.827-13.653-6.827-20.48-6.827h-471.040c-34.133-6.827-54.613 6.827-54.613 40.96v750.933c0 34.133 13.653 47.787 47.787 47.787h607.573c34.133 0 47.787-13.653 47.787-47.787l6.827-628.053zM716.8 730.453h-409.6c-13.653 0-27.307-13.653-27.307-27.307s13.653-27.307 27.307-27.307h409.6c13.653 0 27.307 13.653 27.307 27.307 0 20.48-13.653 27.307-27.307 27.307zM716.8 587.093h-409.6c-13.653 0-27.307-13.653-27.307-27.307s13.653-27.307 27.307-27.307h409.6c13.653 0 27.307 13.653 27.307 27.307s-13.653 27.307-27.307 27.307zM716.8 430.080h-409.6c-13.653 0-27.307-13.653-27.307-27.307s13.653-27.307 27.307-27.307h409.6c13.653 0 27.307 13.653 27.307 27.307s-13.653 27.307-27.307 27.307zM703.147 232.107v-61.44l61.44 54.613h-61.44v6.827z"
                  fill="#ee930e" p-id="3327"></path>
            </svg>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="open" v-if="v.isDir">打开</el-dropdown-item>
            <el-dropdown-item command="download" v-else>下载</el-dropdown-item>
            <el-dropdown-item command="rename">重命名</el-dropdown-item>
            <el-dropdown-item divided command="delete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-tooltip class="item" effect="dark" :content="v.fileName" placement="bottom">
          <div style="line-height: 20px">{{ v.fileName }}</div>
        </el-tooltip>
      </div>
    </div>
    <!-- 新建文件夹-->
    <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="dialogShow" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="margin-right: 50px">
        <el-form-item label="文件夹名：" prop="fileName">
          <el-input v-model="form.fileName" placeholder="请输入" required/>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="dialogShow = false">关闭</el-button>
        <el-button type="primary" @click="submit()" :loading="loading">提交</el-button>
      </el-row>
    </el-dialog>
    <my-up-load v-model="modShow" :parent-ids="parentIds"/>
  </div>
</template>

<script>
import service from "@/api/service";
import table from "@/mixins/table";
import myUpLoad from "@/components/myUpLoad";

export default {
  name: "minio",
  components: {
    myUpLoad
  },
  mixins: [table],
  data() {
    return {
      parentIds: 'TOP',
      modShow: false,
      parentPath: [],
      form: {
        fileName: '',
      },
      rules: {fileName: {required: true, trigger: 'blur', message: '不能为空'},}
    }
  },
  methods: {
    init() {
      if (this.parentPath.length) {
        let row = this.parentPath[this.parentPath.length - 1]
        this.parentIds = row.parentIds + '/' + row.id;
      }
      service.get('/small-service-os/minio', {
        parentIds: this.parentIds
      }).then(res => {
        if (res.status === 200) {
          this.tableData = res.data;
        }
      })
    },
    handleCommand(command, v) {
      if ('open' === command) {
        this.parentPath.push(v)
        this.init();
      } else if ('rename' === command) {
        this.form = v
        this.dialogShow = true
      } else if ('download' === command) {
        window.location.href = v.filePath;
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          service.del('/small-service-os/minio', {id: v.id}).then(this.callback)
        })
      }
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.form.id) {
            service.put('/small-service-os/minio', this.form).then(this.callback)
          } else {
            let row = this.parentPath[this.parentPath.length - 1]
            service.post('/small-service-os/minio/new-folder', {
              fileName: this.form.fileName,
              parentId: row.id,
              parentIds: row.parentIds + '/' + row.id,
              folderColor: '',
              categories: '网盘'
            }).then(this.callback)
          }

        }
      })
    },
    to(i) {
      if (i >= 0) {
        this.parentPath = this.parentPath.splice(0, i + 1)
      } else {
        this.parentPath = []
      }
      this.init()
    },
    uploadFiles() {
      this.modShow = true
    }
  }
}
</script>

<style scoped>
.my-folder {
  width: 120px;
  text-align: center;
}
</style>